<template>
    <div class="list">
        <table class="tb">
            <tr>
                <th>
                    <input type="checkbox" name="" id="">
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>总计</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in data" :key="item.id">
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>
                    <img :src="item.imgSrc" alt="" width="50" height="50">
                </td>
                <td>{{item.code}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="decrease(item)">-</button>
                    &nbsp;
                    {{item.count}}
                    &nbsp;
                    <button @click="increase(item)">+</button>
                </td>
                <td>{{item.total}}</td>
                <td>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
        </table>
        <div class="add" v-show='data.length===0' :style="{textAlign:'center'}">
            没有数据了
        </div>
        <div class="add" :style="{textAlign:'right'}">
            总价格：
            <h1 :style="{color:'red'}">{{total}}</h1>
        </div>
    </div>
</template>
<script>
    export default{
        props:['data'],
        methods:{
            del(id){
                this.$emit('del',id)
            },

            decrease(item){
                if(item.count===1){
                    this.del(item.id)
                }
                item.count--;
                this.computedTotal(item)
            },
            increase(item){
                item.count++;
                this.computedTotal(item)
            },

            computedTotal(item){
                item.total = (item.price*item.count).toFixed(2)
            }
        },
        computed:{
            total(){
                return(this.data.reduce((total,item)=>{
                    let itemTotal = parseFloat(item.total)
                    return total += itemTotal;
                },0)).toFixed(2)
            }
        }
    }
</script>